<template>
  <div class="shop_info_group">
    <div><img v-if="shopInfo.avatar" v-lazy="shopInfo.avatar" height="60px" width="60px" /></div>
    <div class="flex_1">
      <div class="flex">
        <div class="shop_name">
          <p><b style="font-size: 18px;">{{shopInfo.tShopname}}</b>
            <span class="change_btn" v-if="user.isteam !== 3" @click="onClickSel">⟳换店</span></p>
          <p>{{shopInfo.tArea}}{{shopInfo.tXiaoqu}}</p>
        </div>
        <div class="vert_line"></div>
        <div class="info_panel">
          <p class="subject_text">粉丝数</p>
          <p class="number_text"><b>{{shopInfo.tPeopleNumber}}</b></p>
        </div>
        <div class="info_panel">
          <p class="subject_text">购买指数</p>
          <p class="number_text"><b>{{shopInfo.allorder}}</b></p>
        </div>
      </div>
      <van-notice-bar v-if="notice" class="notice_text" :text="noticeText" left-icon="http://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" />
    </div>
  </div>
</template>

<script>
import { NoticeBar } from "vant";
import {
  USER_PROFILE
} from "@/api/user";

import { SHOP_NOTICE } from '@/api/shop';
import moment from 'moment';

export default {
  name: "shop-info-group",

  data() {
    return {
      shopInfo: this.getShop(),
      notice: null
    }
  },

  created() {
    this.getNotice();
    this.$nextTick(() => {
      const title = this.shopInfo.tXiaoqu;
      if (title) {
        this.$route.meta.title = title;
        document.title = title;
      }
    });
  },

  activated() {
    this.shopInfo = this.getShop();
  },

  computed: {
    noticeText() {
      const shop = this.getShop();
      if (shop.isSleep) {
				this.$dialog.alert({
					message: '当前团长已经关闭或者打烊中，请选择其他团长进行下单'
				}).then(() => {
					this.$router.push({
						name: 'home'
					});
				});
        return '休息中，休业时间：' + moment(shop.sleepStartTime).format('YYYY-MM-DD HH:mm')
        + ' 至 ' + moment(shop.sleepEndTime).format('YYYY-MM-DD HH:mm');
      }
      return this.notice.title + '：' + this.notice.content;
    }
  },

  methods: {
    onClickSel() {
      this.$emit('click');
    },
    getNotice() {
      const shop = this.getShop();
      if (shop.isSleep) {
        this.notice = {};
      } else {
        this.$reqGet(SHOP_NOTICE, {centerId: shop.centreId}, {hideLoading: true}).then(res => {
          const { rows, total } = res.data.data;
          if (rows.length > 0) {
            this.notice = rows[0];
          }
        });
      }
    }
  },

  components: {
    [NoticeBar.name]: NoticeBar
  }
};
</script>


<style lang="scss" scoped>
.shop_info_group {
  background-color: #ffffff;
  border-radius: 3%;
  display: flex;
  align-items: center;
}

.shop_info_group img {
  border-radius: 50%;
  margin: 10px;
}

.shop_info_group div {
  vertical-align: middle;
}

.shop_info_group p {
  margin: 0px;
}

.vert_line {
  width: 1px;
  margin: 5px;
  background: #f0f0f0;
}
.number_text {
  font-size: 14px;
  color: $red;
  text-align: center;
}

.notice_text {
  color: $red;
  padding: 0 5px 5px;
  background-color: white;
}

.info_panel {
  padding: 8px 5px;
}

.subject_text {
  font-size:12px;
}

.change_btn {
  margin-left: 5px;
  color: gray;
}

.shop_name {
  padding: 5px;
  flex: 1;
}
</style>
